<template>
	<view class="">
		<!-- <NavBar title="参与采集-招标"></NavBar> -->
		<view class="participate tn-text-lg">
			<view class="bienner tn-padding-right-xs tn-padding-left-xs tn-margin-top-sm tn-margin-bottom-sm">
				<tn-swiper class="swiper" :list="imgList" @click="toUrl"></tn-swiper>
			</view>
			<view class="form tn-padding-sm tn-padding-right tn-padding-left">
				<view class="formItem tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom-sm">
					<text>集采标题:</text>
					<input type="text" v-model="Data.title" disabled class="tn-flex-1" placeholder="请输入集采标题">
				</view>
				<view class="formItem tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom-sm">
					<text>收获地址:</text>
					<input type="text" v-model="Data.address" disabled class="tn-flex-1" placeholder="请输入收获地址">
				</view>
				<view class="formItem tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom-sm">
					<text>报名截止:</text>
					<input v-model="Data.baotime" disabled class="tn-flex-1" placeholder="请选择截止日期" />
				</view>
				<view class="formItem tn-flex tn-flex-row-between tn-flex-col-center">
					<view class="tn-flex-1 tn-flex tn-flex-row-between tn-flex-col-center">
						<text>团长:</text>
						<input type="text" disabled v-model="Data.name" class="tn-flex-1" placeholder="团长">
					</view>
					<view class="tn-flex-1 tn-flex tn-flex-row-between tn-flex-col-center">
						<text>联系方式:</text>
						<input type="text" disabled v-model="Data.phone" class="tn-flex-1" placeholder="联系方式">
					</view>
				</view>
				<view class="demand tn-margin-top-sm">
					<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-left-xs tn-padding-right-xs"
						style="height:80rpx;border-bottom: 1px solid black;">
						<text>集采需求</text>
						<text>{{Data.productName}}类</text>
					</view>
					<view
						class="demandItem tn-flex tn-flex-direction-column tn-border-solid-bottom tn-padding-bottom-sm tn-margin-bottom-sm"
						v-for="v,i in Data.product" :key="v.id">
						<view class="tn-flex tn-flex-row-between tn-flex-col-center" style="height: 80rpx;">
							<text class="tn-text-lg tn-margin-left-xl tn-text-bold">{{v.pro_name}}</text>
							<view class="tn-text-lg">
								<text class="tn-margin-right-sm tn-text-md">已参与数</text>
								<text>{{v.count}}</text>
							</view>
						</view>
						<view class="tn-flex tn-margin-bottom-xs tn-flex-col-center">
							<text>我的采购:</text>
							<input type="number" v-model="v['number']" style="width: 100rpx;" />
							<text>{{v.pro_danwei}}</text>
						</view>
						<view class="tn-flex tn-margin-bottom-xs tn-flex-col-center">
							<text>我的预算:</text>
							<input type="number" v-model="v['price']" style="width: 100rpx;" />
							<text>元</text>
						</view>
						<view class="tn-flex tn-flex-col-center">
							<text>需求备注:</text>
							<input type="text" v-model="v['content']" maxlength="10" class="tn-flex-1" />
						</view>
					</view>
					<view class="demandItem tn-flex tn-flex-row-between tn-flex-col-center">
						<view class="tn-flex-1 tn-flex tn-flex-row-between tn-flex-col-center">
							<text>我的名字:</text>
							<input type="text" v-model="form.myName" style="border: 1px solid #c2c2c2;"
								class="tn-flex-1" placeholder="名称">
						</view>
						<view class="tn-flex-1 tn-flex tn-flex-row-between tn-flex-col-center">
							<text>联系方式:</text>
							<input type="number" maxlength="11" v-model="form.myTel" style="border: 1px solid #c2c2c2;"
								class="tn-flex-1" placeholder="联系方式">
						</view>
					</view>
					<view class="tn-flex-1 tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-sm">
						<text></text>
						<text class="tn-flex-1 tn-text">你的需求和联系方式只有团长可见</text>
					</view>
					<view class="tn-flex tn-flex-row-right">
						<tn-button open-type="share" shape="icon" width="100rpx" height="100rpx"
							backgroundColor="#ff1313" fontColor="#ffffff" fontSize="50">
							<text class="tn-icon-send-fill"></text>
						</tn-button>
					</view>
					<view class="tn-flex tn-flex-row-center tn-margin-bottom-sm">
						<tn-button shape="round" fontSize="32" width="350rpx" height="80rpx" backgroundColor="#ff1313"
							fontColor="#ffffff" @click="toCollectinformation">
							参与集采
						</tn-button>
					</view>
				</view>
			</view>
			<tn-calendar v-model="calendarShow" mode="date"></tn-calendar>
		</view>
		<PopUps></PopUps>
	</view>
</template>

<script>
	// import NavBar from '../../components/NavBar/NavBar.vue'
	import {
		zhaoDetailApi
	} from '../../apis/TenderDetailsApi.js';
	import {
		addCanyuApi,
		dataCanyuApi
	} from '../../apis/participateApi.js';
	import {
		useToTel,
		useTestTel
	} from '../../utlis/hook.js';
	import {
		bannerListApi
	} from '../../apis/indexApi.js'
	import PopUps from '../../components/PopUps/PopUps.vue';
	export default {
		components: {
			// NavBar,
			PopUps
		},
		data() {
			return {
				imgList: [{
						image: 'https://t7.baidu.com/it/u=1819248061,230866778&fm=193&f=GIF',
						title: 'xxx'
					},
					{
						image: 'https://t7.baidu.com/it/u=1819248061,230866778&fm=193&f=GIF',
						title: 'xxx'
					},
				],
				form: {
					myName: '',
					myTel: ''
				},
				Data: {},
				calendarShow: false,
				j_id: 0
			};
		},
		onLoad(props) {
			// if()
			this.j_id = props.id;
			let _data = {
				u_id: uni.getStorageSync('user').u_id,
				j_id: props.id
			}
			zhaoDetailApi(props.id).then(res => {
				// console.log(res)
				if (res.data.msg == '成功') {
					res.data.data.phone = useToTel(res.data.data.phone)
					dataCanyuApi(_data).then(result => {
						console.log(result)
						if (result.data.code == 200) {
							if (result.data.msg == '成功') {
								res.data.data.product.forEach((v, i) => {
									let index = result.data.data.findIndex(x => x.p_id == v
										.p_id);
									v['number'] = result.data.data[index].number;
									v['price'] = result.data.data[index].price;
									v['content'] = result.data.data[index].content;
								});
								// this.isTrue = _indexArr;
								this.form.myName = result.data.data[0].name;
								this.form.myTel = result.data.data[0].phone;
								console.log(result.data.data[0].name, result.data.data[0].phone)
							} else {
								// this.isTrue = []
							}
						}
						this.Data = res.data.data;
					}).catch(error => {
						console.log(error)
						this.Data = res.data.data;
					})
				}
			}).catch(err => {
				console.log(err)
			})
			bannerListApi(uni.getStorageSync('user').province).then(res => {
				if (res.data.msg == '成功') {
					let _img = res.data.data;
					_img = _img.filter(v => v.type === 2);
					_img = _img.map(v => v.image = 'http://admin.xiaobiaohui.com/' + v.image);
					this.imgList = _img;
				}
			}).catch(err => {
				console.log(err)
			})
		},
		methods: {
			toCollectinformation() {

				let _pro = [];
				// let _proIsNull = false;
				// console.log(this.Data.product)
				this.Data.product.forEach(v => {
					// if (v.number ? v.number != '' : false) {
					_pro.push({
						number: v.number || 0,
						price: v.price || 0,
						content: v.content || 0,
						p_id: v.p_id
					})
					// if ((v.number ? v.number != '' : false) || (v.price ? v.price != '' : false)) {

					// } else {
					// 	// _proIsNull = true;
					// }
					// }
				})
				let _data = {
					u_id: uni.getStorageSync('user').u_id,
					j_id: this.j_id,
					pro: JSON.stringify(_pro),
					phone: this.form.myTel,
					name: this.form.myName
				}
				// if (!useTestTel(this.form.myTel)) {
				// 	uni.showToast({
				// 		title: '请正确输入联系方式',
				// 		duration: 1000,
				// 		icon: 'error'
				// 	});
				// 	return
				// }
				let _this = this;
				// console.log(_this.form.tel)
				let rule = [
					[
						() => !useTestTel(_this.form.myTel),
						'请正确输入联系方式'
					],
					[
						() => {
							for (let i = 0; i < _pro.length; i++) {
								if (_pro[i].number != 0 && _pro[i].price != 0) {
									return false
								}
							}
							return true
						},
						'商品不能为空'
					],
					[
						() => {
							for (let key in _data) {
								if (!_data[key]) {
									return true
								}
							}
							return false
						},
						'基本信息不能为空'
					]
				]
				for (let i = 0; i < rule.length; i++) {
					// console.log(rule[i][0]())
					if (rule[i][0]()) {
						uni.showToast({
							title: rule[i][1],
							duration: 2000,
							icon: 'error'
						});
						return
					}
				}
				addCanyuApi(_data).then(res => {
					// console.log(res)
					if (res.data.msg == '成功') {
						uni.redirectTo({
							url: `/pages/collectinformation/collectinformation?type=1&id=${this.j_id}`
						});
					}
				}).catch(err => {
					console.log(err)
				})

			},
			toUrl(e) {
				console.log(e)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.participate {
		width: 750rpx;
		padding: 0 10rpx;

		text {
			width: 140rpx;
		}

		.form {
			width: 100%;
			background-color: #f7f7f7;
			border-radius: 20rpx;

			.formItem {
				height: 50rpx;
			}

			input {
				border-bottom: 1px solid #000;
				padding: 0rpx 10rpx;
				margin: 0 5rpx;
				height: 60rpx;
			}

			.demandItem input {
				border: 1px solid #d3d3d3;
				padding: 0 10rpx;
				border-radius: 10rpx;
				height: 60rpx;
			}
		}
	}
</style>
